<template>
    <el-container>
        <el-aside width="200px">
            <el-container>
				<el-header>
					<el-input placeholder="输入关键字进行过滤" v-model="areaFilterText" clearable></el-input>
				</el-header>
				<el-main class="nopadding">
					<el-tree ref="area" class="menu" node-key="id" :data="tree" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="areaFilterNode" @node-click="areaClick"></el-tree>
				</el-main>
			</el-container>
        </el-aside>
        <el-container>
        <el-header>
            <div class="left-panel">
				<el-button type="primary" icon="el-icon-plus" @click="save"></el-button>
			</div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" tablename="租户列表" :apiObj="list.apiObj" row-key="id" stripe>
                <el-table-column label="租户编码" prop="tenantCode" fixed="left" ></el-table-column>
                <el-table-column label="租户区域" prop="tenantArea"></el-table-column>
                <el-table-column label="地址" prop="address"></el-table-column>
                <el-table-column label="是否有效" prop="enable">
					<template #default="scope">
						<sc-status-indicator v-if="scope.row.enable" type="success"></sc-status-indicator>
						<sc-status-indicator v-if="!scope.row.enable" pulse type="danger"></sc-status-indicator>
					</template>
				</el-table-column>
                <el-table-column label="开通时间" prop="createdTime"></el-table-column>
                <el-table-column label="开通人" prop="createdBy"></el-table-column>
                <el-table-column label="到期时间" prop="timeExpiration"></el-table-column>
                <el-table-column width="500" label="简介" prop="description"></el-table-column>
                <el-table-column label="开通时间" prop="createdTime"></el-table-column>
                <el-table-column label="开通人" prop="createdBy"></el-table-column>
                <el-table-column label="到期时间" prop="timeExpiration"></el-table-column>
                <el-table-column width="500" label="简介" prop="description"></el-table-column>
                <el-table-column label="操作" fixed="right" align="right" width="230">
						<template #default>
							<el-button-group>
								<el-button text type="primary" size="small">查看</el-button>
								<el-button text type="primary" size="small">编辑</el-button>
								<el-button text type="primary" size="small">删除</el-button>
                                <el-dropdown trigger="click">
                                    <el-button text type="primary" size="small">更多...<arrow-down /></el-button>
                                    <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item :icon="Plus" @click="he(scope)">Action 1</el-dropdown-item>
                                        <el-dropdown-item :icon="CirclePlusFilled">
                                        Action 2
                                        </el-dropdown-item>
                                        <el-dropdown-item :icon="CirclePlus">Action 3</el-dropdown-item>
                                        <el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
                                        <el-dropdown-item :icon="CircleCheck">Action 5</el-dropdown-item>
                                    </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
							</el-button-group>
						</template>
				</el-table-column>
            </scTable>
        </el-main>
        </el-container>
    </el-container>

<!-- 弹窗 -->
    <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false">
	</save-dialog>

	<el-drawer v-model="dialog.info" :size="800" title="详细" custom-class="drawerBG" direction="rtl" destroy-on-close>
		<info ref="infoDialog"></info>
	</el-drawer>

</template>

<script>
import saveDialog from './save'

export default{
    name: '租户配置',
    components:{
        saveDialog,
    },
    data() {
        return {
            dialog:{
                save: false,
				info: false
            },
            areaFilterText:"",
            selection: [],
            list:{
                apiObj:this.$API.system.sysTenant.list
            },
            tree:[]
        };  
    },
    mounted() {
        this.getTree(0);
		},
    watch: {
			areaFilterText(val) {
				this.$refs.area.filter(val);
			}
		},
    methods:{
        save(){
             this.dialog.save = true
				this.$nextTick(() => {
					this.$refs.saveDialog.open()
				})
        },
        areaFilterNode(value, data){
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
        async getTree(pid){
            const params ={parentId:pid}
            const res = await this.$API.system.sysArea.getTree.get(params);
            this.tree = res.data;
        },
        areaClick(data)
        {
            alert(data.id);
        }
    },
}
</script>

<style>
.el-dropdown{
    margin-left: 5px;
}
</style>